<template>
  <uni-page-wrapper>
    <uni-page-body>
      <!-- 第一次的修改 -->
      <uni-popup ref="popup" type="dialog">
        <uni-popup-dialog
          type="info"
          mode="input"
          :title="popupTitle"
          :placeholder="popupPlaceholder"
          :before-close="true"
          @close="close"
          @confirm="confirm"
        >
          <input type="text" />
        </uni-popup-dialog>
      </uni-popup>
      <!-- 第二次的提醒 -->
      <uni-popup ref="popup2" type="dialog">
        <uni-popup-dialog
          type="info"
          :title="popup2Title"
          :before-close="true"
          @close="close2"
          @confirm="confirm2"
        >
          <input type="text" />
        </uni-popup-dialog>
      </uni-popup>
      <uni-view>
        <uni-view class="header">
          <uni-view class="black">
            <uni-image class="ava"> 
              <div
                style="
                  background-image: url('/static/img/ava.25882c9f.png');
                  background-position: 0% 0%;
                  background-size: 100% 100%;
                  background-repeat: no-repeat;
                "
              >
            </div>
              <img src="/static/img/ava.25882c9f.png" />
            </uni-image>
            <uni-view class="center">
              <uni-view class="t">{{ level }}</uni-view>
              <uni-view class="b">{{ taskNumber }}</uni-view>
            </uni-view>
          </uni-view>
        </uni-view>
        <uni-view class="icons">
          <uni-view class="item">
            <uni-image class="icon">
              <div
                style="
                  background-image: url('/static/img/vip1.9cabe5d5.png');
                  background-position: 0% 0%;
                  background-size: 100% 100%;
                  background-repeat: no-repeat;
                "
              >
            </div>
              <img src="/static/img/vip1.9cabe5d5.png" />
            </uni-image>
            <uni-view class="label">{{$t("upvip.More commissions")}}</uni-view>
          </uni-view>
          <uni-view class="item">
            <uni-image class="icon">
              <div
                style="
                  background-image: url('/static/img/vip2.10067077.png');
                  background-position: 0% 0%;
                  background-size: 100% 100%;
                  background-repeat: no-repeat;
                "
              >
            </div>
              <img src="/static/img/vip2.10067077.png" />
            </uni-image>
            <uni-view class="label">{{$t("upvip.More tasks")}}</uni-view>
          </uni-view>
          <uni-view class="item">
            <uni-image class="icon">
              <div
                style="
                  background-image: url('/static/img/vip3.127be16e.png');
                  background-position: 0% 0%;
                  background-size: 100% 100%;
                  background-repeat: no-repeat;
                "
              >
            </div>
              <img src="/static/img/vip3.127be16e.png" />
            </uni-image>
            <uni-view class="label">{{$t("upvip.1V1 customer service")}}</uni-view>
          </uni-view>
        </uni-view>
        <uni-view class="list">
          <uni-view class="item" v-for="item in taskList" :key="item.level">
            <uni-view class="level">{{ item.title }}</uni-view>
            <uni-view class="price">{{ item.money }}</uni-view>
            <uni-view class="it">{{ item.rebate }}%</uni-view>
            <uni-view class="it">{{ item.taskNumber }}</uni-view>
            <uni-view class="all">{{$t("upvip.Permanent membership")}}</uni-view>
            <uni-view
              class="submit"
              @click="submit(item.id)"
              v-if="item.state === 0"
              >{{$t("upvip.Buy now")}}</uni-view
            >
          </uni-view>
        </uni-view>
      </uni-view>
    </uni-page-body>
  </uni-page-wrapper>
</template>

<script>
import service from '@/store/service.js'

import uniPopup from "../../components/uni-popup/uni-popup";
import uniPopupDialog from "../../components/uni-popup-dialog/uni-popup-dialog";


export default {
  components: { uniPopup, uniPopupDialog },
  data() {
    return {
      popupTitle: this.$t("upvip.prompt"),
      popupPlaceholder: this.$t("upvip.Please enter the fund password"),
      popup2Title: this.$t("upvip.Are you sure you want to buy?"),
      level: "membership level：VIP1",
      taskNumber: "Maximum number of tasks：20",
      taskList: [
        {
          level: "Experience Zone",
          price: "0",
          rate: "0.25%",
          taskNumber: "20",
          state: "buy",
        },
        {
          level: "VIP1",
          price: "0",
          rate: "0.25%",
          taskNumber: "20",
          state: "buy",
        },
        {
          level: "VIP2",
          price: "50000",
          rate: "0.30%",
          taskNumber: "30",
          state: "notbuy",
        },
        {
          level: "VIP3",
          price: "200000",
          rate: "0.35%",
          taskNumber: "35",
          state: "notbuy",
        },
        {
          level: "VIP4",
          price: "500000",
          rate: "0.40%",
          taskNumber: "40",
          state: "notbuy",
        },
        {
          level: "VIP5",
          price: "1000000",
          rate: "0.40%",
          taskNumber: "45",
          state: "notbuy",
        },
      ],
    };
  },
  mounted() {
  	service.auth(this,service.api.app_getlevel,{},function(self,res){
		self.taskList = res.info
		for(var i in res.info){
			var item = res.info[i]
			if(item.level == res.vip){
				self.level=self.$t("upvip.membership level：")+item.title
				self.taskNumber=self.$t("upvip.Maximum number of tasks：")+item.count
			}
		}
	})
  },
  methods: {
    close(done) {
      done();
    },
    confirm(done, value) {
      //二次确认
      this.jypassword = value
      this.$refs.popup2.open();
      done();
    },
    close2(done) {
      done();
    },
    confirm2(done, value) {
      //调用接口
      console.log(value);
      done();
	  service.auth(this,service.api.app_setlevel,{
		  jypassword:this.jypassword,
		  id:this.selectId
	  })
    },
    submit(id) {
		this.selectId = id
      this.$refs.popup.open();
    },
  },
};
</script>

<style>
@import url(./upVIP.css);
</style>